<template>
	<view class="upgeade">
		<view class="views_swi">
			<!-- <u-swiper :list="list3" mode="none" :effect3d="true" :autoplay="false" :circular="false" height="248"></u-swiper> -->
			<swiper :interval="false" :circular="false" :autoplay="false" previous-margin="40rpx" next-margin="40rpx"
				:current="index_page-1" @animationfinish="page_index_fn"
				style="height:248rpx;background-color: #FFFFFF;">
				<swiper-item class="swiper-item flex-c-c-c" v-for="(item, index) in list3" :key="index">
					<view class="list-image-wrap">
						<image class="swiper-image1" :src="item.img" mode="heightFix"></image>
						<image class="swiper-image" src="@/static/img/icon-xz.png" mode="heightFix"></image>
						<view class="view1 flex-c-b-s">
							<text class="text1">自购享受折扣优惠 丨 享受下级零售利润</text>
							<text class="text1">累计销售</text>
							<view class="view2 flex-c-c-c">
								<view class="view3 flex-r-b-c">
									<!-- <text>{{index===0?'0':list3[index-1].text}}元</text> -->
									<text>0元</text>
									<view style="flex:1;height: 20rpx;" class="item_xiaoshu">
										<text class="item_xiaoshu1" v-if="xiaoshou<item.text && xiaoshou!==0" id="texts"
											:style="'left:calc(' + fn_left(xiaoshou,item.text,text_xs_wid )+' - '+ text_xs_wid + ')'">{{xiaoshou}}元</text>
									</view>
									<text>{{item.text}}元</text>
								</view>
								<view class="view4">
									<view :style="{width:xiaoshou/item.text*100 + '%'}"></view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="title_tit flex-c-c-s">
			<text>{{list[index_page-1].rank}}的权益介绍</text>
		</view>
		<!-- <view class="view_contot_1">
			<view class="txts1">
				<text class="txts1_tit">自购享受折扣优惠</text>
				<text class="txts1_999">自购服务项目限购数9折优惠</text>
				<text class="txts1_999">自购氧发堂几润肤清商品享受6折优惠</text>
			</view>
			<view class="txts1">
				<text class="txts1_tit">享受下级零售利润</text>
				<text class="txts1_458">客户购买氧发堂及润肤清商品</text>
				<text class="txts1_999">直接客户享受40%，客户的朋友享受20%，朋友的朋友享受10%；</text>
				<text class="txts1_458">客户购买氧发堂及润肤清商品</text>
				<text class="txts1_999">直接客户享受40%，客户的朋友享受20%，朋友的朋友享受10%；</text>
			</view>
			<view class="txts1">
				<text class="txts1_tit">邀请代理享受推荐奖</text>
				<text class="txts1_999">邀请的代理享受其服务项目进货价的3%推荐奖；邀请代理享受其氧发堂及润肤清商品进货价的3%的推荐奖；</text>
			</view>
		</view> -->
		<rich-text :nodes="list[index_page-1].content" class="view_contot_1" v-if="list[index_page-1].content">
		</rich-text>
		<view class="cart_box_btn" v-if="list[index_page-1].level>=userLecel">
			<view class="view1_btn flex-c-c-c">
				<view class="flex-c-c-c" style="border-radius: 100rpx!important;" @click="btn">
					<text>充值{{list[index_page-1].price}}元货款升级{{list[index_page-1].rank}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VIP from '@/static/img/vip.png'
	import SVIP from '@/static/img/svip.png'
	import superVIP from '@/static/img/supervip.png'
	export default {
		data() {
			return {
				list3: [{
					img: VIP,
					text: 0
				}, {
					img: SVIP,
					text: 0
				}, {
					img: superVIP,
					text: 0
				}],
				xiaoshou: 700,
				index_page: 1,
				list: [],
				userLecel: null,
				text_xs_wid: 0,
				id_type:undefined
			}
		},
		onLoad(el) {
			this.id_type=el?.id
			const query = uni.createSelectorQuery().in(this);
			this.$api.Agent_upContent().then(res => {
				console.log(res)
				this.list = res.data.data.level
				this.index_page = !!this.id_type?this.id_type:(res.data.data.userlevel || 1)
				this.userLecel = res.data.data.userlevel
				this.xiaoshou = res.data.data.price
				this.list3 = res.data.data.level.map((e, i) => {
					return {
						img: this.list3[i].img,
						text: e.up_price
					}
				})
				let that = this
				setTimeout(() => {
					query.select('#texts').boundingClientRect(data => {
						let data1 =JSON.parse(JSON.stringify(data))
						that.text_xs_wid =res.data.data.price<50?'0px':data1.width+'px'
						console.log(that.text_xs_wid,data1)
					}).exec();
				}, 1000)
			})
		},
		methods: {
			fn_left(xiaoshou,text,text_xs_wid){
				return xiaoshou>text?'0px':(xiaoshou/text*100) + '%' 
				
			},
			page_index_fn(el) {
				this.index_page = el.detail.current + 1
			},
			btn() {
				let that = this
				that.$api.Agent_payUpgrade({
					idcrode: that.list[that.index_page - 1].id
				}).then(res => {
					if (res.data.code === 1000) {
						uni.requestPayment({
							provider: 'wxpay',
							...res.data.data,
							success: function(res) {
								uni.switchTab({
									url: '/pages/tabBar/mine/mine'
								})
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
				// if (this.userLecel === this.index_page) {
				// 	// console.log(66)
				// }
				//  else {
				// 	uni.showToast({
				// 		title: `请先升级到${this.list[this.userLecel-1].rank}`,
				// 		icon:'none'
				// 	})
				// 	this.index_page=this.userLecel
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upgeade {
		// background-color: #FFFFFF !important;
	}

	.views_swi {
		background-color: #FFFFFF !important;
		height: 300rpx;
		padding: 20rpx 0rpx;

		/deep/ .swiper-item {
			width: 660rpx;
			overflow: hidden;
			align-items: center;
			background-color: #ffffff !important;
			height: 248rpx;
			overflow: hidden;
		}
	}


	.list-image-wrap {
		// flex: 1;
		transition: all 0.5s;
		overflow: hidden;
		box-sizing: content-box;
		position: relative;
		width: 640rpx !important;
		height: 248rpx;
		background: linear-gradient(160deg, #58B196 0%, #45806E 100%);
		opacity: 1;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.swiper-image1 {
		position: absolute;
		left: 0;
		top: 0rpx;
		height: 150rpx;
	}

	.swiper-image {
		position: absolute;
		right: -30rpx;
		top: -15rpx;
		height: 300rpx;
	}

	.view1 {
		width: 100%;
		height: 160rpx;
		position: absolute;
		bottom: 0;
		left: 0;

		.text1 {
			font-size: 20rpx;
			color: #FFFFFF;
			text-shadow: 0px 28rpx 40rpx rgba(0, 0, 0, 0.14);
			text-indent: 50rpx;
		}

		.view2 {
			width: 640rpx;
			height: 80rpx;
			background: #ffffff3d;
			box-shadow: 0rpx 28rpx 40rpx rgba(0, 0, 0, 0.14);

			.view3 {
				width: 612rpx;
				height: 40rpx;
				font-size: 20rpx;
				color: #FFFFFF;

				.item_xiaoshu {
					position: relative;

					.item_xiaoshu1 {
						position: absolute;
						top: -4rpx;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}

			.view4 {
				width: 612rpx;
				height: 10rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;


				overflow: hidden;

				view {
					height: 100%;
					background-color: #45806E;
				}
			}
		}
	}

	.title_tit {
		width: 750rpx;
		height: 100rpx;
		padding: 0px 32rpx;

		text {
			font-size: 28rpx;
			color: #45806E;
			font-weight: 600;
		}
	}

	.view_contot_1 {
		width: 750rpx;
		height: auto;
		background-color: #FFFFFF;
		// padding: 32rpx;

		.txts1 {
			height: auto;
			padding: 20rpx;
			background-color: #F4F4F4;
			border-radius: 8rpx;
			width: 686rpx;
			margin-bottom: 20rpx;

			.txts1_tit {
				font-size: 28rpx;
				font-weight: 500;
				padding-bottom: 20rpx;
			}

			.txts1_999 {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}

			.txts1_458 {
				font-size: 26rpx;
				font-weight: 400;
				color: #45806E;
				line-height: 40rpx;
			}
		}
	}

	.cart_box_btn {
		width: 100vw;
		height: calc(constant(safe-area-inset-bottom) + 120rpx);
		height: calc(env(safe-area-inset-bottom) + 120rpx);
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;

		.view1_btn {
			width: 100%;
			height: 120rpx;

			view {
				width: 686rpx;
				height: 80rpx;
				background-color: #45806E;
				border-radius: 50rpx;

				text {
					font-size: 35rpx;
					color: #FFFFFF;
				}
			}

		}
	}
</style>
